<template>
  <BenchCompWrapper title="出入库数量趋势">
    <template v-slot:btn>
      <px-tooltip v-if="currentLevel === 'DAY'" content="返回上一级" placement="top">
        <px-button class="button" text type="primary" @click="handleGoBack()">
          <px-icon><ArrowLeft /></px-icon>
        </px-button>
      </px-tooltip>
      <px-tooltip content="跳转备件台账" placement="top">
        <px-button class="button" text type="primary" @click="goLedger">
          <px-icon><ArrowRight /></px-icon>
        </px-button>
      </px-tooltip>
    </template>
    <template v-slot:content>
      <InAndOutCountTrend ref="leftBarRef" :data="inAndOutTrendData" :level="currentLevel" @updateLevel="updateLevel" />
    </template>
  </BenchCompWrapper>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { computed, ref } from "vue";

import type { ResponseDataOfInAndOutCountTrend } from "@/api/erc/spareParts/signboard";
import { getDataOfInAndOut } from "@/api/erc/spareParts/signboard";

import BenchCompWrapper from "./BenchCompWrapper.vue";
import InAndOutCountTrend from "./InAndOutCountTrend.vue";
import type { InAndOutCountType, LevelType } from "../type";

const dataOfInAndOutCountTrend = ref<ResponseDataOfInAndOutCountTrend>();
const currentLevel = ref<LevelType>("MONTH");

const router = useRouter();

const inAndOutTrendData = computed<InAndOutCountType<ResponseDataOfInAndOutCountTrend> | undefined>(() => {
  if (dataOfInAndOutCountTrend?.value) {
    return {
      xData: dataOfInAndOutCountTrend.value.keyList,
      yData: [
        {
          name: "入库",
          type: "bar",
          data: dataOfInAndOutCountTrend.value.inNumList
        },
        {
          name: "出库",
          type: "bar",
          data: dataOfInAndOutCountTrend.value.outNumList
        }
      ],
      dayTrend: dataOfInAndOutCountTrend.value.dayTrend
    };
  }
  return undefined;
});

const goLedger = () => {
  router.push("/erc/spareParts/ledger");
};

const handleGoBack = () => {
  currentLevel.value = "MONTH";
};

const updateLevel = (level: LevelType): void => {
  currentLevel.value = level;
};

//出入库数量趋势
const getChartData = async params => {
  try {
    const res = await getDataOfInAndOut(params);
    dataOfInAndOutCountTrend.value = res;
  } catch (error) {
    console.log("service error", error);
  }
};

defineExpose({
  getChartData
});
</script>
